<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>单位管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    日期筛选
                </div>
                <div class="layui-inline">
                    <input type="text" class="layui-input" id="dateRange" autocomplete="off" placeholder="点击选择日期">
                </div>
                <!-- 搜索按钮 -->
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-list" id="sup_search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="supTable" lay-filter="supTable"></table>
        </div>
    </div>
</div>

<script type="text/html" id="table_bar">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upd">结清欠款</a>
    </div>
</script>

<script src="../../js/jquery-1.8.3.min.js"></script>
<script src="../../layuiadmin/layui/layui.js"></script>
<script>
    //用于选择页面
    var entityType = "";
    var entityURL = "";
    var entityId = "";
    //layui配置
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'useradmin', 'table', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table
            , layer = layui.layer
            , laydate = layui.laydate;
        laydate.render({
            elem: '#dateRange'
            , range: true
        });

        //监听搜索
        $("#sup_search").on('click', function (data) {
                var supName = $('#supName').val();
                //执行重载
                table.reload('supTable', {
                    method: 'post'
                    , where: {
                        'dateRange': $('#dateRange').val(),
                    }
                    , page: {curr: 1}
                });
            }
        );

        //表格执行渲染
        table.render({
            elem: '#supTable'
            , id: 'supTable'
            , url: '/supplierManage/find'
            , toolbar: true
            , page: true
            , totalRow: true
            , limits: [10, 20, 30, 50]
            , cols: [[
                {field: 'name', title: '名称', totalRowText: "合计"}
                , {field: 'totalprice', title: '欠款(元)', sort: true, totalRow: true}
                , {field: 'price', title: '已还欠款(元)', sort: true, totalRow: true}
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#table_bar'}
            ]]
            , where: {

                'dateRange': $('#dateRange').val(),
            }
        });

        //监听行工具事件
        table.on('tool(supTable)', function (obj) { //注：tool 是工具条事件名，zq_table 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            switch (layEvent) {
                case 'upd':
                    layer.confirm('您确定结算该时间内的欠款吗？', function (index) {
                        var load = layer.load(2);
                        //向服务端发送删除指令
                        $.post('/supplierManage/update',
                            {
                                id: data.id,
                                'dateRange': $('#dateRange').val()

                            }, function (data) {
                                layer.close(load);
                                //得到响应后弹窗提醒
                                layer.msg(data.msg, {icon: data.icon, time: 1500});
                                //data.icon为1的时候说明作废成功
                                if (data.icon == 1) {
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    $(".layui-laypage-btn").click();//点击分页刷新当前页
                                }
                            });
                    });
                    break;
            }
        });
        //必备
        $('.layui-btn.layuiadmin-btn-role').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>

